React = require 'react'
window.React = React

ReactDOM = require 'react-dom'
injectTapEventPlugin = require 'react-tap-event-plugin'

injectTapEventPlugin()

AutoComplete = require '../ui/auto-complete.js'

Auto1 = React.createClass(
  render: ->
    <AutoComplete dataSource={@state?.input1}
      onUpdateInput={@handleUpdateInput}
      onNewRequest={@handleNewRequest} />

  handleUpdateInput: (t) ->
    console.log t
    @setState(input1: [t, t + t, t + t + t])

  handleNewRequest: (t) ->
    console.log "request: #{t}"
)

Auto2 = React.createClass(
  render: ->
    <AutoComplete fullWidth={true}
      hintText="hint"
      dataSource={@state?.input2}
      onUpdateInput={@handleUpdateInput}
      onNewRequest={@handleNewRequest} />
  handleUpdateInput: (t) ->
    console.log t
    @setState(input2: [t, t + t, t + t + t])
  handleNewRequest: (t) ->
    console.log "request: #{t}"
)

Auto3 = React.createClass(
  render: ->
    <AutoComplete fullWidth={true}
      searchText="**********"
      errorText="error message"
      dataSource={@state?.input3}
      onUpdateInput={@handleUpdateInput}
      onNewRequest={@handleNewRequest} />
  handleUpdateInput: (t) ->
    console.log t
    @setState(input2: [t, t + t, t + t + t])
  handleNewRequest: (t) ->
    console.log "request: #{t}"
)

Auto4 = React.createClass(
  render: ->
    ds =
      a: <AutoComplete.Item primaryText={'a'} secondaryText='&#9786;'/>
      divider: <AutoComplete.Divider />
      b: <AutoComplete.Item primaryText={'b'} secondaryText='&#9885;' />
    <AutoComplete fullWidth={true}
      hintText='type here'
      onUpdateInput={@handleUpdateInput}
      showAllItems={true}
      dataSource={ds}
      onNewRequest={@handleNewRequest} />

  handleUpdateInput: (t) ->
    console.log t
  handleNewRequest: (t, idx) ->
    console.log "request: #{idx}"
)

Auto5 = React.createClass(
  render: ->
    <AutoComplete floatingLabelText='floating Label'
      dataSource={['12345', '23456', '34567']} />
)

Auto6 = React.createClass(
  render: ->
    <AutoComplete fullWidth={true}
      floatingLabelText='showAllItems'
      showAllItems={true}
      animated={false}
      dataSource={['12345', '23456', '34567']} />
)

AutoCompleteDemo = React.createClass
  render: ->
    <div>
      <Auto1 />
      <br/>
      <Auto2 />
      <br/>
      <Auto3 />
      <br/>
      <Auto4 />
      <br/>
      <Auto5 />
      <br/>
      <Auto6 />
    </div>

ReactDOM.render <AutoCompleteDemo/>, document.getElementById('root')
